<template>
  <view class="content">
    <view class="title-item">
      <view class="title-name">全部课程</view>
      <view class="title-caidan" @click="ShowHidden = !ShowHidden">
        <image src="../../../static/caidan.png"></image>
      </view>
    </view>
    <!-- 选择菜单框 -->
    <view class="arrivalNavigation" v-if="ShowHidden">
      <view class="d4"></view>
      <view class="sideNavigation">
        <ul style="padding: auto">
          <li @click="handleAdd">添加课程</li>
          <view class="liBottomBorder"></view>
        </ul>
      </view>
    </view>
    <u-search
      v-model="keyword"
      placeholder="请输入课程名"
      @search="handleLoad"
    ></u-search>
    <view
      class="course-item"
      v-for="course in courseList"
      :key="course.courseId"
      @click="
        handleDetailed(course.courseId, course.courseCode, course.courseName)
      "
    >
      <image
        class="img"
        :src="'http://localhost:8888' + course.courseAvatar"
      ></image>

      <view class="course-font-item">
        <view class="course-font-name">《{{ course.courseName }}》</view>
        <view class="course-font-introuduce">{{ course.courseIntroduce }}</view>
        <view>{{ course.joinTime }}</view>
        <view>{{ course.teacher }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/teach/api.js'
export default {
  data() {
    return {
      courseList: [],
      ShowHidden: false,
      parme: {},
      keyword: '',
    }
  },
  methods: {
    handleLoad() {
      let parme = {}
      if (this.keyword) {
        parme.teacher_id = this.parme.value
        parme.course_name = this.keyword
      } else {
        parme.teacher_id = this.parme.value
      }

      this.$http
        .getMethod(api.findCourseByMap, parme)
        .then((res) => {
          if (res.code != 200) {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
            this.courseList = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleDetailed(id, code, courseName) {
      uni.navigateTo({
        url: '/pages/teacher/detailed/detailed?id=' + id,
      })
    },
    handleAdd() {
      uni.navigateTo({
        url: '/pages/teacher/addCourse/addCourse?id=' + this.parme.value,
      })
    },
  },
  onReady() {
    this.$http
      .getMethod(api.findCourseByColumn, this.parme)
      .then((res) => {
        if (res.code != 200) {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
          this.courseList = res.data
        }
      })
      .catch((error) => {
        console.log(error)
      })
  },
  onLoad(option) {
    this.parme.column = 'teacher_id'
    this.parme.value = option.teacherId
  },
}
</script>

<style scoped lang="less">
.content {
  width: 95vw;
  height: 100vh;
  padding: 20upx;
  .title-item {
    display: flex;
    margin-bottom: 20upx;
    .title-name {
      flex: 1;
      text-align: center;
      font-size: 40upx;
    }
    .title-caidan {
      width: 60upx;
      height: 40upx;
      image {
        width: 40upx;
        height: 40upx;
      }
    }
  }

  .arrivalNavigation {
    width: 250rpx;
    position: absolute;
    right: 20rpx;
    z-index: 99;
    .sideNavigation {
      width: 248rpx;
      background-color: #202020;
      color: #eee;
      border-radius: 10rpx;

      li {
        list-style-type: none;
        height: 85rpx;
        text-align: center;
        line-height: 85rpx;
        font-size: 25rpx;
      }
      .liBottomBorder {
        border: 0.1rpx solid #373737;
      }
    }
    .d4 {
      // position: absolute;
      //  	left: 140rpx;
      width: 0;
      height: 0;
      margin-left: 150rpx;
      margin-top: -20rpx;
      border-width: 20rpx;
      border-style: solid;
      border-color: transparent #333 transparent transparent;
      transform: rotate(90deg); /*顺时针旋转90°*/
    }
  }
  .course-item {
    width: 100%;
    height: 320upx;
    margin-top: 20upx;
    margin-bottom: 20upx;
    display: flex;
    .img {
      width: 320upx;
      height: 320upx;
      margin-right: 20upx;
    }
    .course-font-item {
      flex: 1;
      .course-font-name {
        font-size: 40upx;
      }
      .course-font-introuduce {
        font-size: 40upx;
      }
    }
  }
}
</style>
